<template>
	<view class="pageV">
		<!-- 商品详情 -->
		<u-navbar title="商品详情" placeholder @leftClick="onBackClick" leftIconColor="#E6A5B4" bgColor="#00000000"
			:titleStyle="titleStyle">
		</u-navbar>
		<view v-if="goodsDetail" class="centV">
			<scroll-view scroll-y="true" style="height: 92vh;">
				<u-swiper :list="goodsDetail.images_text" height="350" radius="0" imgMode="aspectFill"></u-swiper>
				<view class="infoV">
					<view class="infoVV">
						<view class="moneyV">
							<view class="moneyVV">
								<view class="moneyTv1">¥</view>
								<view class="moneyTv2">{{goodsDetail.sales_price}}</view>
							</view>
							<view class="moneyTv3">¥{{goodsDetail.market_price}}</view>
							<view  class="shareV">
								<image class="shareIv" src="../../static/public/share.svg"></image>
								<button  class="shareTv" open-type="share">分享</button>
							</view>
						</view>
						<view class="infoTv1">{{goodsDetail.title}}</view>
						<view class="infoTv2">已售卖{{goodsDetail.sales}}件</view>
					</view>

					<view class="yunfeiV">
						<view class="yunfeiVV">
							<view class="yunfeiTv1">运费</view>
							<view class="yunfeiTv2">全国包邮</view>
						</view>
					</view>

					<view class="pingjaiv">
						<view class="pingTopV">
							<view class="pingToptV1">评价（{{commNum}}）</view>
							<view class="pingToptV2" @click="onMoreCommentsClicl()">
								查看全部
								<u-icon customStyle="margin-left: 3rpx;" name="arrow-right" color="#939393" size="13">
								</u-icon>
							</view>
						</view>
						<view class="pingjiaItem" v-if="index==0||index==1" v-for="(item,index) in commList"
							:key="index">
							<view class="pingjiaItemV">
								<image class="pingjiaItemIv" :src="item.avatar"></image>
								<view class="pingjiaItemVV">
									<view class="pingjiaItemTv1">{{item.username}}</view>
									<view class="pingjiaItemTv2">{{item.createtime_text}}</view>
								</view>
							</view>
							<view class="pingjiaItemTv3">{{item.comment}}</view>
						</view>
					</view>

					<view class="detailsV">
						<view class="detailsTv">详情介绍</view>
						<view class="detailsTv2">
							<rich-text :nodes="goodsDetail.desc"></rich-text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="bottomV">
			<view class="bottomItemV" @click="onCheClick()">
				<image class="bottomIv" src="https://s1.ax1x.com/2023/04/19/p9kkYSP.png"></image>
				<view class="bottomTv">购物车</view>
				<view class="bottomTv2" v-if="goodsDetail.cart_num>0">
					{{goodsDetail.cart_num}}
				</view>
			</view>
			<view class="bottomAdd" @click="onAddCheClick()">加入购物车</view>
			<view class="bottomBuy" @click="onAddBuyClick()">立即购买 </view>
		</view>

		<uni-popup ref="popup" type="bottom" background-color="#1F1F1F">
			<view class="popupBg">
				<view class="pupTopV">
					<view class="titleV">
						<image class="iv"></image>
						<view class="pupTitleTv"></view>
						<image @tap="onClseClick" class="iv" src="../../static/public/colse.svg"></image>
					</view>

					<view class="info">
						<image class="infoIv" :src="shopImg"></image>
						<view class="infoRightV">
							<view class="pupinfoTv1">{{shopTitle}}</view>
							<view class="pupinfoTv2">¥{{shopMoney*orderNum}}</view>
							<view class="pupinfoTv3">商品编号：{{shopNum}}</view>
						</view>
					</view>

					<view class="yanseV">颜色</view>
					<view class="biaoqianVV">
						<view class="biaoqianV" v-for="(item,index) in orderSpec" :key="index">
							<u-tag @click="onAddClick(item,index)" :text="item.value[0]" :plain="index==shopPos"
								bgColor="#00000000" :borderColor="index==shopPos?'#E6A5B4':'#939393'"
								:color="index==shopPos?'#E6A5B4':'#ffffff'" shape="circle" type="warning"></u-tag>
						</view>
					</view>

					<view class="shuliangV">
						<view class="shuliangTv">数量</view>

						<u-number-box v-model="orderNum">

							<view slot="minus" class="minus">
								<u-icon name="minus" size="12" color="#fff"></u-icon>
							</view>
							<text slot="input" class="input">{{orderNum}}</text>
							<view slot="plus" class="plus">
								<u-icon name="plus" size="12" color="#fff"></u-icon>
							</view>

						</u-number-box>
					</view>

				</view>
				<view class="pupbottomV">
					<view v-if="!addChe" class="bt2" @click="onConfirmClick">立即购买</view>
					<view v-if="addChe" class="bt2" @click="onAddChePupClick">加入购物车</view>
				</view>
			</view>
		</uni-popup>
		
		<ns-login ref="login" @saveUserInfo="onUserInfoClick"></ns-login>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				goodsId: '',
				goodsDetail: null,

				orderNum: 1,
				orderSpec: [], //规格
				shopImg: '',
				shopTitle: '',
				shopMoney: '', //
				shopNum: '', //编号
				shopPos: -1,
				addChe: false,

				commList: [],
				commNum: 0,
			}
		},
		onLoad(e) {
			this.goodsId = e.id;
			
			if (uni.getStorageSync("user_info")) {
				this.getShopGodsDetail();
				this.getShopEvaluate();
			} else {
				this.$refs.login.open({
					show: false
				});
			}
		},
		onShareAppMessage: function(res) {
			console.log("开始分享接收参数--->" + JSON.stringify(res))
			let shopId = this.id;
			let userId = uni.getStorageSync("user_info_id");
			return {
				title: this.detailsData.title,
				path: `shop/commodity/details?id=` + this.goodsId, // 分享后打开的页面
				success: function(res) {
					console.log("转发成功")
				},
				fail: function(res) {
					console.log("转发失败")
				}
			}
		},
		methods: {
			onBackClick() {
				let pages = getCurrentPages();
				if (pages[pages.length - 2]) {
					//如果有上一页，就返回上一页
					wx.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/app/Home'
					});
				}
			},
			onUserInfoClick(e) {
				if (e.code == 200) {
					this.getShopGodsDetail();
					this.getShopEvaluate();
				} else {
			
				}
			},
			getShopGodsDetail() {
				this.$api.getShopGodsDetail({
					id: this.goodsId
				}).then((res) => {
					this.goodsDetail = res;
					this.shopImg = res.image;
					this.shopTitle = res.title;
					this.shopMoney = res.sales_price;
					this.shopNum = res.product_id;
					this.orderSpec = res.spec_table_list;
					if(this.orderSpec.length > 0){
						this.shopPos = 0;
						this.shopMoney = this.orderSpec[0].sales_price
					}
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "获取数据失败" : e.msg)
				})
			},
			onMoreCommentsClicl() { //更多评论
				this.$u.route({
					url: "/shop/commodity/detailsMoreComments",
					params: {
						id: this.goodsId,
					}
				})
			},
			getShopEvaluate() {
				this.$api.getShopEvaluate({
					product_id: this.goodsId,
					page: 1,
					pagesize: 10,
				}).then((res) => {
					this.commList = res;
					this.commNum = res.length
				}).catch((e) => {

				})
			},
			onAddBuyClick() { //立即购买
				this.addChe = false;
				this.$refs.popup.open()
			},
			onClseClick() {
				this.$refs.popup.close()
			},
			onAddCheClick() { //加入购物车
				this.addChe = true;
				this.$refs.popup.open()
			},
			onAddChePupClick() {
				if (this.orderSpec.length > 0 && this.shopPos == -1) {
					uni.$u.toast("请选择商品规格")
					return
				}
				uni.showLoading();
				this.$api.getShopAdd({
					id: this.goodsId,
					spec: this.orderSpec.length ? this.orderSpec[this.shopPos].code : '',
				}).then((res) => {
					uni.hideLoading();
					this.$refs.popup.close()
					uni.$u.toast("添加成功")
				}).catch((e) => {
					uni.hideLoading();
					uni.$u.toast(e.msg === undefined ? "添加失败" : e.msg)
				})
			},
			onAddClick(item, index) { //选择规格
				this.shopPos = index;
				this.shopMoney = item.sales_price
			},
			onConfirmClick() { //确认立即购买
				if (this.orderSpec.length > 0 && this.shopPos == -1) {
					uni.$u.toast("请选择商品规格")
					return
				}
				console.log("------")

				this.getShopOrderCreate();
			},
			getShopOrderCreate() {
				this.$api.getShopOrderCreate({
					id: this.goodsId,
				}).then((res) => {
					this.$refs.popup.close();
					this.$u.route({
						url: "/shop/commodity/settlement",
						params: {
							id: this.goodsId,
							orderNum: this.orderNum,
							orderimg: this.shopImg,
							shopMoney: this.shopMoney,
							shopTitle: this.shopTitle,
							shopGuiGe: this.orderSpec.length > 0 ? JSON.stringify(this.orderSpec[this
								.shopPos]) : null,
						}
					})
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "创建订单失败" : e.msg)
				})
			},
			onInput() { //选择数量

			},
			onCheClick() { //购物车
				this.$u.route({
					url: "/shop/home/Shopping",
				})
			}
		}
	}
</script>

<style lang="scss">
	.pageV {
		min-height: 100vh;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.centV {
		position: fixed;
		top: 0;
		width: 100%;
		flex: 1;
	}

	.infoV {
		margin-top: -30rpx;
		position: absolute;
		width: 100%;
	}

	.infoVV {
		background: #383838;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.moneyV {
		display: flex;
	}

	.moneyVV {
		display: flex;
		align-items: baseline;
		align-items: baseline;
	}

	.moneyTv1 {
		font-size: 40rpx;
		color: #E6A5B4;
	}

	.moneyTv2 {
		font-size: 60rpx;
		color: #E6A5B4;
		margin-left: 6rpx;
	}

	.moneyTv3 {
		font-size: 40rpx;
		color: #858585;
		margin-left: 50rpx;
		text-decoration: line-through;
		display: flex;
		align-items: center;
		flex: 1;
	}

	.infoTv1 {
		margin-top: 20rpx;
		font-size: 34rpx;
		color: #FFFFFF;
	}

	.infoTv2 {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #858585;
	}

	.bottomV {
		height: 98rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
	}

	.bottomItemV {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		position: relative;
	}

	.bottomIv {
		width: 38rpx;
		height: 38rpx;
	}

	.bottomTv {
		font-size: 22rpx;
		margin-top: 4rpx;
		color: #8D8D8D;
	}

	.bottomTv2 {
		position: absolute;
		top: 0rpx;
		left: 55%;
		border-radius: 50%;
		background: #CEF743;
		font-size: 22rpx;
		color: #333737;
		width: 30rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottomAdd {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #CEF743;
		background: rgba(206, 247, 67, 0.2);
	}

	.bottomBuy {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #333737;
		background: #CEF743;
	}

	.detailsV {
		background: #383838;
		border-radius: 20rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.detailsTv {
		padding-left: 30rpx;
		padding-top: 30rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		padding-bottom: 30rpx;
	}

	.detailsTv2 {
		padding-left: 30rpx;
		padding-top: 30rpx;
		color: #FFFFFF;
		padding-bottom: 30rpx;
	}

	.popupBg {
		height: 900rpx;
		display: flex;
		flex-direction: column;
	}

	.titleV {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 30rpx;
		box-sizing: border-box;

		.iv {
			width: 42rpx;
			height: 42rpx;
		}

		.titleTv {
			color: #e8e8e8;
			font-size: 36rpx;
			max-width: 450rpx;
			min-width: 450rpx;
		}

	}

	.pupTopV {
		height: 740rpx;
		padding-bottom: 160rpx;
		overflow-y: scroll;
	}

	.pupbottomV {
		display: flex;
		height: 98rpx;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 30rpx;
		z-index: 99;
	}

	.bt2 {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		background: #CEF743;
		border-radius: 10rpx;
		color: #333333;
		font-size: 32rpx;
	}

	.info {
		display: flex;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.infoIv {
		width: 250rpx;
		height: 250rpx;
		border-radius: 10rpx;
		background-color: antiquewhite;
	}

	.infoRightV {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		margin-left: 30rpx;
	}

	.pupinfoTv1 {
		font-size: 32rpx;
		color: #F9F9F9;
	}

	.pupinfoTv3 {
		font-size: 28rpx;
		color: #9B9B9B;
		padding-right: 10rpx;
	}

	.pupinfoTv2 {
		font-size: 36rpx;
		color: #E6A5B4;
	}

	.yanseV {
		margin-top: 50rpx;
		font-size: 32rpx;
		color: #939393;
		margin-left: 30rpx;
	}

	.shuliangV {
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.shuliangTv {
		font-size: 32rpx;
		color: #939393;
	}

	.biaoqianVV {
		display: flex;
		flex-wrap: wrap;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.biaoqianV {
		margin-right: 20rpx;
		margin-top: 20rpx;
	}

	.pingjaiv {
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding: 30rpx;
		background: #383838;
		border-radius: 20rpx;
	}

	.pingTopV {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.pingToptV1 {
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.pingToptV2 {
		font-size: 28rpx;
		color: #939393;
		display: flex;
		align-items: center;
	}

	.pingjiaItem {
		margin-top: 30rpx;
	}

	.pingjiaItemV {
		display: flex;
		align-items: center;
	}

	.pingjiaItemIv {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #CEF743;
	}

	.pingjiaItemVV {
		display: flex;
		flex-direction: column;
		margin-left: 10rpx;
	}

	.pingjiaItemTv1 {
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.pingjiaItemTv2 {
		font-size: 24rpx;
		color: #858585;
		margin-top: 3rpx;
	}

	.pingjiaItemTv3 {
		margin-top: 20rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.yunfeiV {
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding: 30rpx;
		background: #383838;
		border-radius: 20rpx;
	}

	.yunfeiVV {
		display: flex;
		align-items: center;
	}

	.yunfeiTv1 {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		color: #FFFFFF;
	}

	.yunfeiTv2 {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		color: #FFFFFF;
		margin-left: 60rpx;
	}

	.minus {
		width: 40rpx;
		height: 50rpx;
		border-color: #E6E6E6;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border: 2rpx solid #939393;
	}

	.input {
		width: 80rpx;
		height: 50rpx;
		text-align: center;
		border-bottom: 2rpx solid #939393;
		border-top: 2rpx solid #939393;
		color: #fff;
		font-size: 32rpx;
	}

	.plus {
		width: 40rpx;
		height: 50rpx;
		border-color: #E6E6E6;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border: 2rpx solid #939393;
	}
	.shareV {
		display: flex;
		align-items: center;
	
		.shareIv {
			width: 32rpx;
			height: 32rpx;
		}
	
		.shareTv {
			margin-left: 5rpx;
			color: #979797;
			font-size: 28rpx;
			background-color: #00000000;
			display: flex;
			align-items: center;
		}
	
		button::after {
			border: none;
		}
	
		button {
			position: relative;
			display: block;
			margin-left: auto;
			margin-right: auto;
			padding-left: 0px;
			padding-right: 0px;
			box-sizing: border-box;
			text-align: center;
			text-decoration: none;
			line-height: 1.35;
			-webkit-tap-highlight-color: transparent;
			overflow: hidden;
			color: #000000;
			background-color: #fff;
			width: 100%;
			height: 100%;
		}
	}
</style>
